Vue.component('sampleText', {//文本消息
    template: `<div>1</div>`,
})
Vue.component('sampleMarkdown', {//富文本消息
    template: `<div>2</div>`,
})
Vue.component('sampleImageMsg', {//图片消息
    template: `<div>3</div>`,
})
Vue.component('sampleActionCard', {//链接消息
    template: `<div>4</div>`,
})
Vue.component('sampleLink', {//链接消息
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="图片链接">
                <el-input v-model.trim="data.picUrl"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="跳转链接">
                <el-input v-model.trim="data.messageUrl"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px">{{data.text}}</div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})
Vue.component('sampleActionCard2', {//卡片消息：竖向二个按钮。
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮名称">
                <el-input v-model.trim="data.actionTitle1" placeholder="请输入第一个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮链接">
                <el-input v-model.trim="data.actionURL1" placeholder="请输入第一个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮名称">
                <el-input v-model.trim="data.actionTitle2" placeholder="请输入第二个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮链接">
                <el-input v-model.trim="data.actionURL2"  placeholder="请输入第二个按钮链接"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px">{{data.text}}</div>
                <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
                </div>
                <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
                </div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
            <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
            </div>
            <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
            </div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})
Vue.component('sampleActionCard3', {//卡片消息：竖向三个按钮。
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮名称">
                <el-input v-model.trim="data.actionTitle1" placeholder="请输入第一个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮链接">
                <el-input v-model.trim="data.actionURL1" placeholder="请输入第一个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮名称">
                <el-input v-model.trim="data.actionTitle2" placeholder="请输入第二个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮链接">
                <el-input v-model.trim="data.actionURL2"  placeholder="请输入第二个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮名称">
                <el-input v-model.trim="data.actionTitle3" placeholder="请输入第三个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮链接">
                <el-input v-model.trim="data.actionURL3"  placeholder="请输入第三个按钮链接"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px">{{data.text}}</div>
                <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
                </div>
                <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
                </div>
                <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
                </div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
            <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
            </div>
            <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
            </div>
            <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
            </div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})
Vue.component('sampleActionCard4', {//卡片消息：竖向四个按钮
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮名称">
                <el-input v-model.trim="data.actionTitle1" placeholder="请输入第一个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮链接">
                <el-input v-model.trim="data.actionURL1" placeholder="请输入第一个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮名称">
                <el-input v-model.trim="data.actionTitle2" placeholder="请输入第二个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮链接">
                <el-input v-model.trim="data.actionURL2"  placeholder="请输入第二个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮名称">
                <el-input v-model.trim="data.actionTitle3" placeholder="请输入第三个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮链接">
                <el-input v-model.trim="data.actionURL3"  placeholder="请输入第三个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第四个按钮名称">
                <el-input v-model.trim="data.actionTitle4" placeholder="请输入第四个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第四个按钮链接">
                <el-input v-model.trim="data.actionURL4"  placeholder="请输入第四个按钮链接"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px">{{data.text}}</div>
                <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
                </div>
                <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
                </div>
                <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
                </div>
                <div @click="handleURL(data.actionURL4)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle4}}</span>
                </div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
            <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
            </div>
            <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
            </div>
            <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
            </div>
            <div @click="handleURL(data.actionURL4)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle4}}</span>
            </div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})
Vue.component('sampleActionCard5', {//卡片消息：竖向五个按钮
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮名称">
                <el-input v-model.trim="data.actionTitle1" placeholder="请输入第一个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮链接">
                <el-input v-model.trim="data.actionURL1" placeholder="请输入第一个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮名称">
                <el-input v-model.trim="data.actionTitle2" placeholder="请输入第二个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮链接">
                <el-input v-model.trim="data.actionURL2"  placeholder="请输入第二个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮名称">
                <el-input v-model.trim="data.actionTitle3" placeholder="请输入第三个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第三个按钮链接">
                <el-input v-model.trim="data.actionURL3"  placeholder="请输入第三个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第四个按钮名称">
                <el-input v-model.trim="data.actionTitle4" placeholder="请输入第四个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第四个按钮链接">
                <el-input v-model.trim="data.actionURL4"  placeholder="请输入第四个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第五个按钮名称">
                <el-input v-model.trim="data.actionTitle5" placeholder="请输入第五个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第五个按钮链接">
                <el-input v-model.trim="data.actionURL5"  placeholder="请输入第五个按钮链接"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px">{{data.text}}</div>
                <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
                </div>
                <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
                </div>
                <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
                </div>
                <div @click="handleURL(data.actionURL4)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle4}}</span>
                </div>
                <div @click="handleURL(data.actionURL5)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle5}}</span>
                </div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
            <div @click="handleURL(data.actionURL1)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle1}}</span>
            </div>
            <div @click="handleURL(data.actionURL2)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle2}}</span>
            </div>
            <div @click="handleURL(data.actionURL3)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle3}}</span>
            </div>
            <div @click="handleURL(data.actionURL4)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle4}}</span>
            </div>
            <div @click="handleURL(data.actionURL5)" style="border-top: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center;height: 35px;">
                <span style="color: #409EFF; font-size: 14px;">{{data.actionTitle5}}</span>
            </div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})
Vue.component('sampleActionCard6', {//卡片消息：横向二个按钮。
    template: `<div><el-row v-if="!preview" :gutter="20">
    <el-col :span="18">
        <div class="table_titel">
            <div class="titel">模板实例化</div>
        </div>
        <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="标题">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="正文">
            <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="请输入内容" v-model.trim="data.text">
                <el-input v-model.trim="data.title"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮名称">
                <el-input v-model.trim="data.buttonTitle1" placeholder="请输入第一个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第一个按钮链接">
                <el-input v-model.trim="data.buttonUrl1" placeholder="请输入第一个按钮链接"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮名称">
                <el-input v-model.trim="data.buttonTitle2" placeholder="请输入第二个按钮名称"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="第二个按钮链接">
                <el-input v-model.trim="data.buttonUrl2"  placeholder="请输入第二个按钮链接"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </el-col>
    <el-col :span="6">
        <div class="table_titel">
            <div class="titel">预览(仅供参考,以手机为准)</div>
        </div>
        <div style="width: 200px;">
            <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
                <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
                <div style="border-top: 1px solid #eaeaea; display: flex;height: 35px;">
                    <div @click="handleURL(data.buttonUrl1)" style="display: flex; align-items: center; width: 50%;">
                        <span style="width: 100%; text-align: center; color: #409EFF; font-size: 14px; border-right: 1px solid #eaeaea;">{{data.buttonTitle1}}</span>
                    </div>
                    <div @click="handleURL(data.buttonUrl2)" style="display: flex; align-items: center; justify-content: center; width: 50%;">
                        <span style="color: #409EFF; font-size: 14px;">{{data.buttonTitle2}}</span>
                    </div> 
                </div>
            </el-card>
        </div>
    </el-col></el-row>
    <div v-else style="width: 200px;">
        <el-card :body-style="{backgroundColor:'white',padding:'5px 0 5px 5px'}">
            <div style="font-size:12px;margin-bottom:10px;text-align: start;">{{data.text}}</div>
            <div style="border-top: 1px solid #eaeaea; display: flex;height: 35px;">
                <div @click="handleURL(data.buttonUrl1)" style="display: flex; align-items: center; width: 50%;">
                    <span style="width: 100%; text-align: center; color: #409EFF; font-size: 14px; border-right: 1px solid #eaeaea;">{{data.buttonTitle1}}</span>
                </div>
                <div @click="handleURL(data.buttonUrl2)" style="display: flex; align-items: center; justify-content: center; width: 50%;">
                    <span style="color: #409EFF; font-size: 14px;">{{data.buttonTitle2}}</span>
                </div> 
            </div>
        </el-card>
    </div></div>`,
    props: {
        data: {
            type: Object,
            default: function () {
                return {}
            }
        },
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        C() {
            return this.preview ? 0 : 18
        },
        P() {
            return this.preview ? 5 : 6
        }
    },
    methods: {
        handleURL(url) {
            if (url) {
                window.open(url, '_blank', 'width=600,height=400');
            }
        }
    }
})